import { useState } from'react';
import { NavBar, Image, Dropdown } from 'antd-mobile';
import { SearchOutline, DownOutline } from 'antd-mobile-icons';
import '../styles/hospitalList.scss'
import { useNavigate } from 'react-router-dom'
import TabBarFooter from '../components/TabBarFooter';

// 医院数据模型
interface Hospital {
  id: string;
  name: string;
  level: string;
  type: string;
  address: string;
  district: string;
  canBookOnline: boolean;
  imageUrl?: string;
}

const HospitalListPage: React.FC = () => {
  const navigate = useNavigate()

  // 医院数据列表
  const [hospitals] = useState<Hospital[]>([
    {
      id: '1',
      name: '北京协和医院',
      level: '三甲',
      type: '综合医院',
      address: '北京市东城区帅府园1号',
      district: '东城区',
      canBookOnline: true,
    },
    {
      id: '2',
      name: '北京大学第一医院',
      level: '三甲',
      type: '综合医院',
      address: '北京市西城区西什库大街8号',
      district: '西城区',
      canBookOnline: true
    },
    {
      id: '3',
      name: '中国人民解放军总医院',
      level: '三甲',
      type: '综合医院',
      address: '北京市海淀区复兴路28号',
      district: '海淀区',
      canBookOnline: true
    }
  ])

  // 当前选中的底部导航项
  // const [activeTab, setActiveTab] = useState('hospital')

  // 筛选条件
  const [district, setDistrict] = useState<string>('区域')
  const [level, setLevel] = useState<string>('医院等级')
  const [sortBy, setSortBy] = useState<string>('综合排序')

  // 处理底部导航切换
  // const handleTabChange = (key: string) => {
  //   setActiveTab(key)
  // }

  // 处理返回按钮点击
  const handleBack = () => {
    navigate('/home')
  }

  return (
    <div className="hospital-list-page">
      <NavBar
        className='nav-bar'
        onBack={handleBack}
        right={<SearchOutline fontSize={20} />}
      >医院列表</NavBar>

      {/* 筛选区域 */}
      <div className="filter-section">
        <Dropdown>
          <Dropdown.Item
            key="district"
            title={
              <div className="dropdown-title">
                {district} <DownOutline fontSize={12} />
              </div>
            }
            className='dropdown-item'
          >
            <div className="dropdown-content">
              <div className="dropdown-option" onClick={() => setDistrict('全部区域')}>全部区域</div>
              <div className="dropdown-option" onClick={() => setDistrict('东城区')}>东城区</div>
              <div className="dropdown-option" onClick={() => setDistrict('西城区')}>西城区</div>
              <div className="dropdown-option" onClick={() => setDistrict('海淀区')}>海淀区</div>
              <div className="dropdown-option" onClick={() => setDistrict('朝阳区')}>朝阳区</div>
            </div>  
          </Dropdown.Item>
          <Dropdown.Item
            key="level"
            title={
              <div className='dropdown-title'>
                {level} <DownOutline fontSize={12} />
              </div>
            }
            className='dropdown-item'
          >
            <div className="dropdown-content">
              <div className="dropdown-option" onClick={() => setLevel('全部等级')}>全部等级</div>
              <div className="dropdown-option" onClick={() => setLevel('三甲')}>三甲</div>
              <div className="dropdown-option" onClick={() => setLevel('三乙')}>三乙</div>
              <div className="dropdown-option" onClick={() => setLevel('二甲')}>二甲</div>
              <div className="dropdown-option" onClick={() => setLevel('二乙')}>二乙</div>
            </div>  
          </Dropdown.Item>
          <Dropdown.Item
            key="sort"
            title={
              <div className='dropdown-title'>
                {sortBy} <DownOutline fontSize={12} />
              </div>
            }
            className='dropdown-item'
          >
            <div className="dropdown-content">
              <div className="dropdown-option" onClick={() => setSortBy('综合排序')}>综合排序</div>
              <div className="dropdown-option" onClick={() => setSortBy('评分最高')}>评分最高</div>
              <div className="dropdown-option" onClick={() => setSortBy('距离最近')}>距离最近</div>
            </div>
          </Dropdown.Item>
        </Dropdown>
      </div>

      {/* 医院列表 */}
      <div className="hospital-list">
        {hospitals.map(hospital => (
          <div
            key={hospital.id}
            className="hospital-item"
            onClick={() => navigate(`/hospital/${hospital.id}`)}
          >
            <div className="hospital-logo">
              <Image 
                src={hospital.imageUrl ||  "https://via.placeholder.com/80"}
                width={80}
                height={80}
                fit="cover"
                placeholder=""
                alt={hospital.name}
             />
            </div>
            <div className="hospital-info">
              <h3 className="hospital-name">{hospital.name}</h3>
              <div className="hospital-level">
                {hospital.level} | {hospital.type}
              </div>
              <div className="hospital-address">
                地址：{hospital.address}
              </div>
              {hospital.canBookOnline && (
                <div className="online-booking-tag">可线上挂号</div>
              )}
            </div>
          </div>  
        ))}
      </div>

      {/* 底部导航栏 */}
      <TabBarFooter activeKey="medical" />
    </div>
  )
}

export default HospitalListPage;
